<template>
  <!--日期选择-->
  <div class="date-select-box">
    <div class="date-select-title">
      <p v-text="title"></p>
    </div>
    <div class="date-select" ref="dateSelect">
      <input
        @click="readOnly ? null: selectClick()"
        v-model="value"
        type="text"
        ref="select"
        class="select"
        :placeholder="placeholder_def"
        :disabled="readOnly" readonly>
      <div class="option" ref="myOption">
        <div class="change">
          <div class="change-last" @click="yearLast()">&lt;</div>
          <div class="change-last-sub" @click="monthLast()">&lt;</div>
          <div class="date-range" v-text="MonthRange"></div>
          <div class="change-next" @click="yearNext()">&gt;</div>
          <div class="change-next-sub" @click="monthNext()">&gt;</div>
        </div>
        <!-- body区，显示日历 -->
        <div class="select-option" ref="selOption">
          <table>
            <!-- 日历顶端显示星期几 -->
            <thead>
            <tr>
              <th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th><th>日</th>
            </tr>
            </thead>
            <!-- 日历主体部分，每一行显示七天 -->
            <tbody>
            <template v-for="(item,index) in dateArr">
              <tr :key="index">
                <template v-for="(mItem,mIndex) in item">
                  <template v-if="(index == 0 && mItem > 7) || (index == dateArr.length-1  && mItem < 7)">
                    <td style="background-color: #222833;color: rgba(255,255,255,0.1)"
                        :key="mIndex"
                        v-text="mItem">
                    </td>
                  </template>
                  <template v-else>
                    <td :key="mIndex"
                        @click="selectedDatetime($event,mItem)"
                        v-text="mItem">
                    </td>
                  </template>
                </template>
              </tr>
            </template>
            </tbody>
          </table>
        </div>
      </div>
      <template v-if="!readOnly">
        <div  class="select-control" ref="control">
          <span class="control01">
            <svg-icon icon-class="arrow-down"/>
            <!-- ☑ -->
          </span>
          <span class="control02" @click="control02Click()">
            <svg-icon icon-class="content-clear"/>
            <!-- × -->
          </span>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
    export default {
        props: {
            value: {
                type: Object,
                default: () => null
            },
            title: {
                type: String,
                default: () => {
                    return "日期时间选择"
                }
            },
            placeholder: {
                type: String
            },
            readOnly:{
                type: Boolean,
                default: () => false
            },
            format:{
                type: String,
                default: () => "yyyy-MM-dd"
            }
        },
        data() {
            return {
                dropOpen: true,
                placeholder_def: this.placeholder == null? "请选择" + this.title : this.placeholder,
                MonthRange : null,
                currentYear: new Date().getFullYear(), // 当前年
                currentMonth: new Date().getMonth(), // 当前月
                currentDay: new Date().getDay(), // 当前日
                currentHour: new Date().getHours(), // 当前时
                currentMinute: new Date().getMinutes(), // 当前分
                currentSecond: new Date().getSeconds(), // 当前秒
                dateArr: [],
            }
        },
        mounted() {
            this.initDate()
            addEventListener('mousedown', (e) => {
              // 监听组件以外的点击事件
              const path=e.path || (e.composedPath && e.composedPath());
              if (!path.includes(this.$refs.myOption) && !path.includes(this.$refs.select)) {
                  if(!this.dropOpen){
                      this.optSelect(false)
                      this.dropOpen = !this.dropOpen
                  }
              }
            })
        },
        methods: {
            initDate(){
                this.dateArr = []
                let lastMonthTotalDay = new Date(this.currentYear,this.currentMonth,0).getDate() // 上月总数
                let currentMonthStartWeek = new Date(this.currentYear,this.currentMonth,1).getDay() // 当前月开始星期
                let currentMonthTotalDay = new Date(this.currentYear,this.currentMonth+1,0).getDate() // 当前月总数
                let calendarData = []
                // 补充头部缺少的天数
                let headLackDays = currentMonthStartWeek
                for(let i = 0; i < headLackDays; i++) {
                    calendarData[currentMonthStartWeek-i-1] = (lastMonthTotalDay - i) < 10?
                                                              "0"+(lastMonthTotalDay - i)
                                                              :lastMonthTotalDay - i
                }
                // 补充当前月天数
                for(let i = currentMonthStartWeek,day = 1; day <= currentMonthTotalDay; i++,day++) {
                    calendarData[i] = day < 10? "0"+day : day
                }
                // 补充尾部缺少的天数
                if(currentMonthStartWeek + currentMonthTotalDay > 35) {
                    let tailLackDays = 42 - (currentMonthStartWeek + currentMonthTotalDay)
                    for(let i = 0; i < tailLackDays; i++) {
                        calendarData[42 - tailLackDays + i] = (i + 1) < 10? "0"+(i + 1) : i + 1
                    }
                } else {
                    let tailLackDays = 35 - (currentMonthStartWeek + currentMonthTotalDay)
                    for(let i = 0; i < tailLackDays; i++) {
                        calendarData[35 - tailLackDays + i] = (i + 1) < 10? "0"+(i + 1) : i + 1
                    }
                }
                // 将35天拆成5组
                let counts = 0
                for(let i = 0; i < calendarData.length; i++) {
                    let arrSun = []
                    for (let j = 0; j < 7; j++) {
                        arrSun[j] = calendarData[i+j]
                    }
                    i = i + 6
                    this.$set(this.dateArr, counts, arrSun)
                    counts++
                }

                this.MonthRange = this.currentYear + "-"+ (this.currentMonth +1)
            },
            yearLast() {
                if (this.currentYear >= 1970) {
                    this.currentYear = this.currentYear - 1
                    this.initDate()
                }

            },
            yearNext() {
                this.currentYear = this.currentYear + 1
                this.initDate()
            },
            monthLast() {
                if (this.currentMonth > 0) {
                    this.currentMonth = this.currentMonth - 1
                    this.initDate()
                }
            },
            monthNext() {
                if (this.currentMonth < 11) {
                    this.currentMonth = this.currentMonth + 1
                    this.initDate()
                }
            },
            selectedDatetime(e,day) {
                this.currentDay = day
                this.setCurrentTime()

                this.value = this.formatDatetime()
                this.$emit("input",this.value)

                this.optSelect(false)
                this.dropOpen = !this.dropOpen
            },
            setCurrentTime() {
                this.currentHour = new Date().getHours() < 10? "0" + new Date().getHours():new Date().getHours() // 当前时
                this.currentMinute = new Date().getMinutes() < 10? "0" + new Date().getMinutes():new Date().getMinutes() // 当前分
                this.currentSecond = new Date().getSeconds() < 10? "0" + new Date().getSeconds():new Date().getSeconds() // 当前秒
            },
            formatDatetime() {
                let date = this.format.replace("yyyy",this.currentYear)
                date = date.replace("MM",this.currentMonth)
                date = date.replace("dd",this.currentDay)
                date = date.replace("HH",this.currentHour)
                date = date.replace("mm",this.currentMinute)
                date = date.replace("ss",this.currentSecond)
                return date
            },
            optSelect() {
                if(this.dropOpen) {
                    this.$refs.control.style.transform="rotate(-180deg)"
                    this.$refs.myOption.style.maxHeight= this.$refs.selOption.offsetWidth + "px"
                    this.$refs.myOption.style.transform="scaleY(1) scale(1)"
                    this.$refs.dateSelect.style.border="1px solid #39404d"
                } else {
                    this.$refs.control.style.transform="rotate(0deg)"
                    this.$refs.myOption.style.maxHeight="0px"
                    this.$refs.myOption.style.transform="scaleY(0) scale(0.5)"
                    this.$refs.dateSelect.style.border="1px solid #2b313e"
                }
            },
            selectClick() {
                if(this.dropOpen) {
                    this.optSelect(true)
                } else {
                    this.optSelect(false)
                }
                this.dropOpen = !this.dropOpen
            },
            control02Click() {
                if(!this.dropOpen){
                    this.optSelect(false)
                    this.dropOpen = !this.dropOpen
                }
                this.label= null
                this.$emit("input", null);
            },
            optionLiClick(e,item) {
                let months = document.getElementsByClassName("months")
                for(let i = 0; i< months.length; i++) {
                    months[i].style.backgroundColor = "transparent";
                }
                e.currentTarget.style.backgroundColor = "#252b38"
                this.value=  item
                this.$emit("input", item);
                // 选择后弹出框消失
                this.optSelect(false)
                this.dropOpen = !this.dropOpen
            },
        }
    }
</script>

<style scoped>
  input, input:focus {
    background: none;
    outline: none;
    border: none;
  }
  ul,li {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .date-select-box {
    width: 100%;
    height: 30px;
    margin: 15px auto;
  }
  .date-select-title {
    cursor: default;
    float: left;
    width: 20%;
    height: 100%;
    line-height: 30px;
    font-size: 14px;
    letter-spacing: 1.5px;
  }
  .date-select-title p {
    width: 100%;
    margin: 0 0;
    text-align: center;
    color: rgba(255, 255, 255,0.5);
  }
  .date-select {
    cursor: pointer;
    float: left;
    position: relative;
    width: 73%;
    height: 25px;
    /*margin-top: 1.5px;*/
    border: 1px solid #2b313e;
    border-radius: 3px;
    background-color: #222833; /*背景颜色*/
    transition: 0.3s;
  }
  .select {
    cursor: default;
    width: 80%;
    height: 23px;
    background-color: transparent;
    padding-left: 8px;
    padding-right: 8px;
    letter-spacing: 1.5px;
    color: rgba(255, 255, 255,0.5);
    /* 文字溢出处理 */
    display: -webkit-box;
    overflow:hidden;
    text-overflow: ellipsis;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:1;
  }
  .select::placeholder {
    color: rgba(255, 255, 255,0.2);
  }

  .date-text input {
    border: 1px solid #2b313e;
    border-radius: 3px;
    width: 100%;
    height: 20px;
    font-size: 13px;
    letter-spacing: 1.5px;
    color: rgba(255, 255, 255,0.3);
    background-color: transparent;
    transition: 0.3s;
  }
  .date-text input:focus {
    border: 1px solid #39404d;
  }
  .date-text input::placeholder {
    color: rgba(255, 255, 255,0.2);
    font-weight: lighter;
  }

  .option {
    margin-top: 5px;
    width: 100%;
    min-height: 0;
    border: 1px solid #2b313e;
    background-color: #222833;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
    border-radius: 3px;
    position: absolute;
    top: 25px;
    transform: scaleY(0) scale(0.5);
    transition: 0.25s;
    z-index: 999;
  }
  .select-option {
    width: calc(100% - 10px);
    /*max-height: 150px;*/
    padding: 5px;
    font-size: 12px;
  }

  .change{
    user-select: none;
    position: relative;
    width: 100%;
    height: 30px;
    font-weight: bolder;
  }
  .change-last,.change-next,.change-last-sub,.change-next-sub {
    width: 25px;
    height: 25px;
    font-size: 18px;
    color: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
    position: absolute;
    bottom: 0px;
  }
  .change-last{
    left: 5%;
    text-align: center;
  }
  .change-last-sub{
    left: 15%;
    text-align: center;
  }
  .change-next{
    right: 5%;
    text-align: center;
  }
  .change-next-sub{
    right: 15%;
    text-align: center;
  }
  .change-last:hover,.change-next:hover,.change-last-sub:hover,.change-next-sub:hover{
    background-color: #1c2430;
    color: rgba(255, 255, 255, 0.4);
  }
  .change-last:active,.change-next:active,.change-last-sub:active,.change-next-sub:active{
    background-color: #1e2734;
    color: rgba(255, 255, 255, 0.4);
  }
  .date-range{
    width: 60%;
    height: 20px;
    line-height: 20px;
    text-align: center;
    color: rgba(255, 255, 255, 0.3);
    letter-spacing: 1px;
    font-size: 12px;
    position: fixed;
    top:10px;
    left: 0;
    right: 0;
    margin: auto;
  }
  .control02 {
    display: none;
  }
  .select-control {
    user-select: none;
    cursor: pointer;
    width: 18px;
    height: 18px;
    line-height: 18px;
    font-size: 12px;
    text-align: center;
    color: rgba(255, 255, 255,0.2);
    position: absolute;
    top: 3px;
    right: 10px;
    transition: 0.3s;
  }
  .select-control:hover .control01 {
    display: none;
    color: rgba(255, 255, 255,0.4);
  }
  .select-control:hover .control02 {
    display: block;
    color: rgba(255, 255, 255,0.4);
  }

  .select-control:active .control02 {
    color: rgba(255, 255, 255,0.6);
  }



  table {
    width: 100%;
    text-align: center;
    border-collapse:collapse;  /*表格的边框合并，如果相邻，则共用一个边框。*/
    border-spacing:0px;  	   /*设置行与单元格边框的间距。*/
  }
  th {
    user-select: none;
    height: 25px;
    padding: 0 10px;
    font-size: 12px;
    letter-spacing: 1.2px;
    color: rgba(255, 255, 255,0.35);
    background-color: rgba(28, 34, 45, 0.5);
  }
  tr td {
    user-select: none;
    cursor: pointer;
    height: 30px;
    padding: 0 10px;
    font-size: 13px;
    letter-spacing: 1.2px;
    color: rgba(255, 255, 255,0.35);
  }
  tr{
    background-color: #222833; /*背景颜色*/
    transition: 0.2s;
  }

  table td:hover {
    background-color: rgba(39, 48, 63, 0.5) ;
  }

</style>

docker run -itd --memory 10G -p 2881:2881 -p 2883:2883 --name oceanbase1 943379e0b05b
